import React, { Component } from 'react';

import { Row, Col, Slider } from 'antd';
import { Container } from './style'

import connect from "./connect"
import Desk from "./ui/Desk"
import Lun from "./Lun"
import { fromJS } from '_immutable@4.0.0-rc.12@immutable';


import EchartsTest from "./Chart"

interface IProps {
 
  area:any
  areadesk:any;
   
  }


const option = {
  legend: {//说明标签
      type: 'scroll',
      data: ['name1'],
      textStyle: {
          color: 'pink'
      }
  },
  xAxis: [{//x轴
      axisLabel: {//文字
          formatter: '{value}',
          textStyle: {
              color: 'pink'
          }
      },
      axisLine: {//线条
          lineStyle: {
              color: 'pink'
          },
      },
      axisTick: {//刻度
          lineStyle: {
              color: 'pink'
          }
      }
  }],
  yAxis: [],//与x轴设置方法一致
  series: [{
      name: 'name1',
      type: 'bar',
      data: [1,2,3],
      label: {//图形上的文字
          show: true,
          position: 'top',
          textStyle:{
              color: 'pink'
          }
      }
  }]
}




const colCounts:any = {};


    [2, 3, 4, 6, 8, 12].forEach((value, i) => {
      colCounts[i] = value;
    });

// @conenct
class index extends Component <IProps>{
    state = {
      colCountKey: 2,
      warehouseNum:5,
      sss:false,
      select:"A"
      
      };

      // 新增加的区域
      componentDidMount(){
        this.setState({ warehouseNum:this.props.area});
      }

    
      
    
    
      onColCountChange = (colCountKey:number) => {
        // 
        this.setState({ colCountKey });
      };

      // 
    handleClick(evt:any){
      // evt.nativeEvent.stopImmediatePropagation();
      // evt.stopImmediatePropagation();
      // evt.stopPropagation();
      // 点击区域的 时候
      // 点击时候让这个状态 取反
      // var regex =/[A-Z]/.test()
      if( /^[A-Z]{0,1}$/.test(evt.target.innerText)){
      this.setState({select:evt.target.innerText})
      console.log(evt.target.innerText);
    }
    this.setState({sss:!this.state.sss})

      
      //  alert(evt.target.childNodes[0].data);
    }
      render() {
        // console.log(this.props.area);
        const { colCountKey, warehouseNum} = this.state;
        const cols = [];
        //  存储
        const colCount = colCounts[colCountKey];
        let colCode = '';
        // 遍历 处区域
        for (let i = 0; i < warehouseNum; i++) {
          cols.push(
            <Col key={i.toString()} span={24 / colCount}   onClick={this.handleClick.bind(this)}>

              <div className="qu" >  {String.fromCharCode(i + 65)} </div>

              {/* 向内部组件传值  内部的模态框 */}
              {/* open  控制 子模态框 显示隐藏的 */}
              <Desk open={this.state.sss}  sel={this.state.select}/>


            </Col>,
          );
          colCode += ` <Col span={${24 / colCount}} />\n`;
        }
        return (

          <>
          <Container >
         
            <span className="top"> 区域个数:{this.state.warehouseNum}</span>
            <div style={{ width: '50%', marginBottom: 28 }}>
        

            </div>
            {/* gutter={[gutters[gutterKey], vgutters[vgutterKey]]} */}
            {/* 仓库区域 */}
            <Row  gutter={[6,6]}  id="components-grid-demo-playground">
              {cols}
              {/* {cols} */}
            </Row>
         
          </Container >

          <Lun/>

          <EchartsTest  width={'90%'} />
          </>
        );
      }
}

// export default connect( index);
export default connect(index);
